<template>
  <div>
    <zz-dialog
      title='上传照片'
      :visible = visible
      :isBlueground="true"
      @confirm="confirmData"
      @close="close">
      <div style="height: 460px;width: 741px" v-bar>
        <div>
          <zz-upload
            class="mb10"
            updateTip="上传图片"
            :type="['jpg', 'png', 'jpeg']"
            @updateFile="updateFileHandel">
          </zz-upload>
          <zz-upload-list listWidth="741px" :files="fileList" imgWidth="239px" imgHeight="185px" fileImgWidth="239px" fileImgHeight="185px" uploadListSonDivWidth="33%" uploadListSonDivheight="250px" ></zz-upload-list>
        </div>
      </div>
      <div class="left" slot="footer-left">
        <div>
          <span style="line-height: 30px">拍摄人姓名：</span>
          <input type="text" v-model="manName" class="input-l270" style="background: rgba(12, 69, 95, 0.4); border-color: #136387;width: 160px" >
          <span style="line-height: 30px" class="ml20">拍摄人电话：</span>
          <input type="text" v-model="manPhone" class="input-l270" style="background: rgba(12, 69, 95, 0.4); border-color: #136387;width: 160px" >
        </div>
        <div class="mt10 mb10">
          <span style="line-height: 30px">拍摄日期：</span>
          <zz-date
            :place="place"
            inputClass="dateWidth"
            background="rgba(12, 69, 95, 0.4)"
            borderColor="#136387"
            class="mr10 inline"
            @change="handleChange"
            type="day"
            style="margin-left: 14px">
          </zz-date>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        dayTime: '',
        fileList: [],
        filesUploadList: [],
        fileUuid: '',
        place: '',
        manName: '',
        manPhone: ''
      }
    },
    watch: {
      visible (value) {
        if (value) {
          // this.findDictList()
        } else {
          Object.assign(this.$data, this.$options.data())
        }
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      projectId: {
        type: String,
        default: null
      }
    },
    methods: {
      close () {
        this.$emit('close')
      },
      confirmData () {
        if (this.dayTime === '') {
          this.$message.error('请选择拍摄日期！')
          return
        }
        if (this.fileUuid === '') {
          this.$message.error('请选择需上传照片！')
          return
        }
        let data = {
          'projectId': this.projectId,
          'shotTimeStr': this.dayTime,
          'uuidStr': this.fileUuid,
          'photographerName': this.manName,
          'photographerTelephone': this.manPhone
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/videoPictureController/add`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.$message.success('上传成功！')
          this.$emit('addSuccess')
        })
      },
      updateFileHandel (files) {
        this.filesUploadList = []
        this.fileList = files
        this.filesUploadList = files.map((file) => {
          return file.fileUuid
        })
        this.fileUuid = this.filesUploadList.join(',')
      },
      handleChange (value) {
        this.dayTime = value
      }
    }
  }
</script>
<style lang="scss">
  .dateWidth{
    width: 160px;
    height: 30px;
    border: 1px #e2eaee solid;
    font-size: 0.85rem;
    padding: 7px 10px 6px 10px;
    color: #939997;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>
